<template>
  <div id="app">
    <MyContent>
      <template #title>
        本周热搜 TOP 5
      </template>

      <template #body>
        <li v-for="(item, index) in list1" :key="index" class="first-item">
          <p class="left">#{{ item.tag }}</p>
          <p><img src="./assets/fire.png" class="fire">{{ item.value }}</p>
        </li>
      </template>
    </MyContent>

    <MyContent>
      <template #title>
        <p>可能感兴趣的人</p>
        <p><img src="./assets/transfer.png" class="transfer">换一批</p>
      </template>
      <template #body>
        <li v-for="(item, index) in list2" :key="index" class="first-item">
          <div class="person">
            <div class="detail">
              <span class="name">{{ item.name }} </span>
              <img :src="getGenderIcon(item.gender)" class="gender-icon">
              <span> {{ item.age }}岁</span>
              <p>研究领域：{{ item.research_area }}</p>
              <p>{{ item.university }} · {{ item.position }}</p>
            </div>
            <p>
              <span class="follow"> + 关注 </span>
            </p>
          </div>
        </li>
      </template>
    </MyContent>

  </div>
</template>

<script>
import MyContent from './components/MyContent.vue';


export default {
  name: 'App',
  components: {
    MyContent
  },
  data() {
    return {
      list1: [
        { "tag": "区块链", "value": 96 },
        { "tag": "数据挖掘", "value": 91 },
        { "tag": "无人机", "value": 87 },
        { "tag": "生命科学", "value": 72 },
        { "tag": "传感器", "value": 60 }
      ],
      list2: [
        {
          "name": "李国盛",
          "gender": "男",
          "age": 52,
          "research_area": "机电一体化技术",
          "university": "哈尔滨工业大学",
          "position": "教授"
        },
        {
          "name": "陈颖",
          "gender": "女",
          "age": 36,
          "research_area": "人工智能",
          "university": "清华大学",
          "position": "副教授"
        }
      ]
    }
  },
  methods: {
    getGenderIcon(gender) {
      return gender === '男' ? require('./assets/boy.png') : require('./assets/girl.png');
    }
  }
}
</script>

<style scoped>
li {
  list-style: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  width: 100%;
  height: 100%;
  background-color: #f4f6fa;
  padding: 30px 60px;
}

.first-item {
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 12px 0;
}

.first-item .left {
  padding: 5px 8px;
  background-color: #eee;
  border-radius: 5px;
}

.first-item .fire {
  width: 18px;
  height: 18px;
  margin-right: 5px;
  vertical-align: middle;
}

.first-item:last-child {
  border: 0;
}

/*  */
.transfer {
  width: 18px;
  height: 18px;
  margin-right: 5px;
  vertical-align: middle;
}

.person {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.detail {
  color: #8c9196;
  font-size: 13px;
}

.detail p {
  margin-top: 5px;
}

.name {
  color: black;
  font-size: 16px;
}

.follow {
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-color: #007aff;
  padding: 3px 8px;
  border-radius: 30px;
}

.gender-icon {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-bottom: 3px;
}
</style>
